<template>
  <q-dialog v-model="show" persistent>
    <q-card class="dialog-content halt-detail" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="$emit('close')"
          />
          <span class="font-size-16">
            异常循环明细
          </span>
        </div>
      </q-card-section>
      <div style="padding: 20px" class="flex items-center justify-between">
        <q-btn outline color="primary" label="批量标记" @click="changeNormal(selected, 'list')" />
        <div style="font-size: 12px; color: #999999">*超过48小时的异常不能标记正常</div>
      </div>
      <q-card-section style="padding: 0" class="page-content">
        <q-table
          class="users-table scroll my-sticky-virt scroll-table stick-last-col myTable"
          :columns="tableColumns"
          :data="tableData"
          row-key="index"
          :pagination.sync="pagination"
          no-data-label="暂无数据"
          selection="multiple"
          :selected.sync="selected"
          color="primary"
          :hide-bottom="tableData.length != 0"
          style="max-height: 300px;margin: 0"
        >
          <template v-slot:body-cell-work="props">
            <q-td>
              {{props.row.productName || '—'}}（{{props.row.processNo || '—'}}-{{props.row.processName || '—'}}）
            </q-td>
          </template>
          <template v-slot:body-cell-btn="props">
            <q-td>
              <q-btn flat color="primary" label="标记正常" :disable="props.row.isOver" class="table-flat-btn" @click="changeNormal(props.row.timestamp, 'single')"/>
            </q-td>
          </template>
          <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { getAbnormalWorkpieces, abnormalWorkpiecesRelease } from '../../../boot/status/machine'
import { date } from 'quasar'
export default {
  name: 'abnormal-detail',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    boxId: {
      default: '',
      required: true
    },
    since: {
      default: '',
      required: true
    },
    before: {
      default: '',
      required: true
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格列
      tableColumns: [
        { name: 'index', field: 'index', label: '', align: 'left' },
        { name: 'time', field: 'time', label: '时间', align: 'left' },
        { name: 'work', field: 'work', label: '作业', align: 'left' },
        { name: 'programName', field: 'programName', label: '主程序号', align: 'left' },
        { name: 'roundTime', field: 'roundTime', label: '循环用时', align: 'left' },
        { name: 'exception', field: 'exception', label: '异常原因', align: 'left' },
        { name: 'btn', field: 'btn', label: '操作', align: 'left' }
      ],
      // 显示列
      visibleColumns: ['time', 'work', 'programName', 'roundTime', 'exception', 'btn'],
      // 选中列表
      selected: [],
      tableData: []
    }
  },
  methods: {
    // 标记正常
    changeNormal (data, type) {
      let timeStamps = []
      let hasOver = false
      if (type === 'single') {
        timeStamps.push(data)
      } else {
        data.forEach(item => {
          if (item.isOver) {
            this.$q.dialog({
              title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-53" ></i> 选中明细已超过48小时，不能标记正常</p>`,
              html: true,
              ok: {
                unelevated: true,
                label: '确认'
              }
            })
            hasOver = true
            return false
          } else {
            timeStamps.push(item.timestamp)
          }
        })
      }
      if (!hasOver) {
        console.log(timeStamps)
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-53" ></i> 确定标记正常，标记后不可修改</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          },
          cancel: {
            unelevated: true,
            outline: true,
            label: '取消'
          }
        })
          .onOk(() => {
            abnormalWorkpiecesRelease(timeStamps).then(res => {
              if (res.code === '1200') {
                this.$q.dialog({
                  title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-53" ></i> 成功标记正常</p>`,
                  html: true,
                  ok: {
                    unelevated: true,
                    label: '确认'
                  }
                })
                  .onOk(() => {
                    this.getList()
                    this.$emit('initData')
                  })
              }
            })
          })
      }
    },
    // 转换时长
    getDuration (second) {
      var days = Math.floor(second / 86400)
      var hours = Math.floor((second % 86400) / 3600)
      var minutes = Math.floor(((second % 86400) % 3600) / 60)
      var seconds = Math.floor(((second % 86400) % 3600) % 60)
      var duration = (days > 0 ? days + '天' : '') + (hours > 0 ? hours + '小时' : '') + (minutes > 0 ? minutes + '分' : '') + seconds + '秒'
      return duration
    },
    // 获取列表数据
    getList () {
      getAbnormalWorkpieces(this.boxId, this.since, this.before).then(res => {
        res.data.forEach((o, index) => {
          o.index = index
          o.time = date.formatDate(new Date(o.time), 'YYYY-MM-DD HH:mm:ss')
          o.roundTime = this.getDuration(o.spendTime)
          o.diffTime = date.getDateDiff(new Date(), new Date(o.time), 'hours')
          o.isOver = o.diffTime > 48
        })
        this.tableData = res.data
      }).finally(
        this.$emit('getDetailedCount')
      )
    }
  },
  watch: {
    show: function (newVal) {
      // console.log(newVal)
      if (newVal) {
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.q-table__bottom--nodata{
    min-height auto
    padding 6px 0 0
  }
</style>
